@import url('../../common.css');

.markdown-transform-html {
  font-size: 13.5px;
  color: var(--markdown-primary-color);
  .head-layout {
    position: relative;
    color: #eee;
    img {
      width: 32mm;
      border-radius: 50%;
    }
    .flex-layout {
      justify-content: space-around;
    }

    &::after {
      content: '';
      position: absolute;
      left: -30px;
      top: -25px;
      width: calc(100% + 60px);
      height: calc(100% + 30px);
      z-index: -1;
      background: var(--markdown-primary-bg-color);
    }
  }
  .main-layout {
    padding: 0 20px;
    margin-top: 20px;
    > .flex-layout {
      .flex-layout-item {
        &:last-child {
          width: calc(100% - 150px);
          .flex-layout {
            .flex-layout-item {
              flex: 1;
              &:last-child {
                text-align: right;
              }
            }
          }
        }
      }
      > .flex-layout-item {
        &:first-child {
          flex: 1;
        }
        h4 {
          text-align: center;
        }
      }
    }
  }

  .flex-layout {
    padding-top: 10px;
    &:first-child,
    &:nth-child(2) {
      padding-top: 0;
    }
  }

  h2 {
    margin-top: 10px;
    i.iconfont {
      color: var(--markdown-primary-bg-color);

      font-size: 1.2rem;
    }
  }
  strong,
  b,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: #000;
  }
  p,
  li {
    margin-top: 8px;
  }

  i.iconfont {
    margin-right: 6px;
  }

  ul,
  ol {
    margin-left: 15px;
  }
}
